<template>
	<view>
		<view class="title">
			<view v-for="(items, index) in list" :key="index" :class="{ active: active == index }" @click="select(index)">
				<view class="title-list">{{ items.name }}</view>
			</view>
		</view>
		<view class="media">
			<view v-show="active == 0">
				<scroll-view scroll-x="true">
					<view class="media-newmusic">
						<view v-for="(items, index) in newmusic" :key="items.id" @click="getdata(items)">
							<view class="img-box"></view>
							<image class="img" :src="items.album.blurPicUrl" mode=""></image>
							<view class="media-title">{{ items.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-show="active == 1">
				<scroll-view scroll-x="true">
					<view class="media-newmusic">
						<view v-for="(items, index) in newsablum" :key="items.id" @click="getdata(items)">
							<view class="img-box"></view>
							<image class="img" :src="items.blurPicUrl" mode=""></image>
							<view class="media-title">{{ items.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-show="active == 2">
				<scroll-view scroll-x="true">
					<view class="media-newmusic">
						<view v-for="(items, index) in numlist" :key="items.id" @click="albumid(items,index)">
							<view class="img-box"></view>
							<image class="img" :src="items.coverUrl" mode=""></image>
							<view class="media-title">{{ items.albumName }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapMutations } from 'vuex';
import { songurl } from '@/network/https/api.js';
import {albumSong} from "@/utils/song.js"
export default {
	props: ['newmusic', 'newsablum', 'numlist'],
	data() {
		return {
			list: [
				{
					name: '新歌'
				},
				{
					name: '新碟'
				},
				{
					name: '数字专辑'
				}
			],
			active: ''
		};
	},
	onLoad() {
		
	},
	methods: {
		select(index) {
			this.active = index;
		},
		...mapMutations(['_getnames', '_getpicUrl', '_getmp3url', '_songlist']),
		async getdata(item) {
			const { data: res } = await songurl(item.id);
			// this._songlist(res.data);
			// this._getnames(item.name);
			// this._getpicUrl(item.album.picUrl);
			// this._getmp3url(res.data[0].url);
			uni.$emit('list',{data:item})
			uni.setStorage({
				key:'playmusic',
				data:item,
				success: () => {
					console.log("成功");
				}
			})
			uni.navigateTo({
				url:`/components/common/palyer`
			})
		},
		albumid(items,index){
			 albumSong(items)
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	display: flex;
	margin-left: 20rpx;
	margin-top: 30rpx;
	font-weight: bold;
	.title-list {
		margin-left: 30rpx;
	}
	.active {
		color: red;
	}
}
.media {
	margin-top: 20rpx;
	.media-newmusic {
		display: flex;
		.img-box {
			width: 200rpx;
			height: 200rpx;
			margin-left: 20rpx;
			position: absolute;
			border-radius: 40rpx;
			background: #f5f5f5;
			box-sizing: content-box;
			background: linear-gradient();
			box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
			z-index: 1;
		}
		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 30rpx;
			margin-left: 20rpx;
			z-index: 1;
		}
		.media-title {
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; //2行
			-webkit-box-orient: vertical;
		}
	}
}
</style>
